import { Table, Input , Col, Row, Button ,Tree,DatePicker ,Modal,Select,Space,Menu } from 'antd';
const { Search } = Input;
import React, { useState} from 'react';
import { EditableProTable } from '@ant-design/pro-table';
import { DownOutlined,PaperClipOutlined,SearchOutlined} from '@ant-design/icons';

import styles from './style.less'

const { Option } = Select;

const Report: React.FC = () => {

  const treeData = [
    {
     
       
          title: '智能马达',
          key: '0-0-0',
          // icon: <MehOutlined />,
        },
        {
          title: '设备名称',
          key: '0-0-1',
        },
        {
          title: '设备名称',
          key: '0-0-2',
        },  {
          title: '设备名称',
          key: '0-0-3',
        },

  ];

  const dataSource = [
    {
      location: 'a栋宿舍配电箱',
      hour0: 50.35,
      hour1: 50.35,
      hour2: 50.35,
      hour3: 50.35,
      hour4: 50.35,
      hour5: 50.35,
      hour6: 50.35,
      hour7: 50.35,
    },
    {
      location: 'b栋宿舍配电箱',
      hour0: 30.35,
      hour1: 50.35,
      hour2: 50.35,
      hour3: 50.35,
      hour4: 50.35,
      hour5: 50.35,
      hour6: 50.35,
      hour7: 50.35,
    },{
      location: '合计',
      hour0: 30.35,
      hour1: 50.35,
      hour2: 50.35,
      hour3: 50.35,
      hour4: 50.35,
      hour5: 50.35,
      hour6: 50.35,
      hour7: 50.35,
    },
  ];
  const selectDataSource = [
    {
      projectName: 'projectName',
      projectAddress:'projectAddress',
     
    },{
      projectName: 'projectName',
      projectAddress:'projectAddress',
     
    },{
      projectName: 'projectName',
      projectAddress:'projectAddress',
     
    }
  ];
  const columns = [
    {
      title: '区域位置',
      dataIndex: 'location'
    },
    {
      title: '00时(kW·h)',
      dataIndex: 'hour0',
    },
    {
      title: '01时(kW·h)',
      dataIndex: 'hour1',
    }, {
      title: '02时(kW·h)',
      dataIndex: 'hour2',
    },
    {
      title: '03时(kW·h)',
      dataIndex: 'hour3',
    }, {
      title: '04时(kW·h)',
      dataIndex: 'hour4',
    },
    {
      title: '05时(kW·h)',
      dataIndex: 'hour5',
    }, {
      title: '06时(kW·h)',
      dataIndex: 'hour6',
    },
    {
      title: '07时(kW·h)',
      dataIndex: 'hour7',
    },
  ];

  const selectColumns = [
    {
      title: '项目名称',
      dataIndex: 'projectName'
    },
    {
      title: '项目地址',
      dataIndex: 'projectAddress',
    }
  ];

  


const [isModalVisible, setIsModalVisible] = useState(false);
const [selectData, setSelectData] = useState(selectDataSource);
const [current, setCurrent] = useState("1");


function onTreeSelect(selectedKeys, info){
  console.log('selected', selectedKeys, info);
  const newSelectData = cloneDeep(selectData); 
  newSelectData.push( {
      projectName: 'projectName1',
      projectAddress:'projectAddress1',
     
    });
    console.log(selectData)
    setSelectData(newSelectData);
    console.log(selectData)
}
const showModal = () => {
  setIsModalVisible(true);
};
function onChange(date, dateString) {
  console.log(date, dateString);
}

const handleOk = () => {
  setIsModalVisible(false);
};

const handleCancel = () => {
  setIsModalVisible(false);
};
    function onSearch(val) {
      console.log('search:', val);
    }

    function PickerWithType({ type, onChange }) {
      if (type === 'date') return <DatePicker   popupStyle={{ background: 'rgb(20, 49, 115)'}}   bordered={false}  onChange={onChange} />;
      return <DatePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}     bordered={false}  picker={type} onChange={onChange} />;
    }

    const handleClick = (e) => {
      console.log('click ', e);
      setCurrent(e.key)
    
    };
    function SwitchablePicker() {
      const [type, setType] = useState('date');
      return (
        <Space>
          <div  className={styles.inputBg} >
            <Select value={type}  bordered={false}    dropdownStyle={{ background: 'rgb(20, 49, 115)'}}  onChange={setType}>
                <Option value="date">日</Option>
                <Option value="week">周</Option>
                <Option value="month">月</Option>
                <Option value="quarter">季度</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <PickerWithType type={type} onChange={value => console.log(value)} />
          </div>(kW·h)
        </Space>
      );
    }
    return (
      <>
        <Row gutter={24}  style={{ margin: '-16px 0 '}} > 
          <Col xl={6} lg={6} md={6} sm={6} xs={6} style={{  padding: '24px 12px', borderRight: '1px solid #355fb8' }}>
            <div  className={styles.projectTitle}>
              <h1>全部区域</h1>
              <span onClick={showModal}  className={styles.right} >切换区域</span>
            </div>
            <div  className={styles.search} >
             {/* <Search placeholder="" onSearch={onSearch} enterButton={
              <Button style={{      background: '#242e3d'}}><SearchOutlined /></Button>
            } />  */}
              <div style={{    backgroundColor: '#40a9ff',borderRadius: '3px'}}>
                <Input bordered={false} size="large" className={styles.inputBg} suffix={ <SearchOutlined onClick={onSearch}  style={{    fontSize: '20px'}}/> }
                />
              </div>
            </div>
            <div  >  
              {/* <Tree
                showIcon
                blockNode
                defaultExpandAll
                defaultSelectedKeys={['0-0-0']}
                switcherIcon={<></>}
                treeData={treeData}
              /> */}
              <Menu style={{border:0}}  onClick={handleClick}  selectedKeys={[current]}>
                  <Menu.Item key="1" style={{borderTop:0}} className={current=="1"?styles.menuSelected:''} >智能马达</Menu.Item>
                  <Menu.Item  key="2" style={{borderTop:0}}  className={current=="2"?styles.menuSelected:''}>设备名称</Menu.Item>
                  <Menu.Item  key="3" style={{borderTop:0}}  className={current=="3"?styles.menuSelected:''}>设备名称</Menu.Item>
                  <Menu.Item  key="4" style={{borderTop:0}}  className={current=="4"?styles.menuSelected:''}>设备名称</Menu.Item>
               
              </Menu>
            </div>
          </Col>
 
          <Col xl={18} lg={18} md={18} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>
            <Row className={styles.tabletop}>
           
              <SwitchablePicker />
              <Button className={styles.exporttBtn}
              type="primary" >
              <PaperClipOutlined />
              导出
            </Button>

            </Row>
           
            {/* <Table dataSource={dataSource} columns={columns} /> */}
            <EditableProTable
            style={{margin:'0 -25px'}}
              rowKey="id"
              recordCreatorProps={ false }
              columns={columns}
              value={dataSource}
            
            />
          </Col>
        </Row>
        <Modal title="切换项目"   width={1060} style={{backgroundColor: '#1b2535'}} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
          <Row gutter={24} > 
            <Col xl={6} lg={6} md={6} sm={6} xs={6} style={{  borderRight: '1px solid #355fb8' }}>
              <div  className={styles.search} >  
                <Search placeholder="" onSearch={onSearch} enterButton={ <Button style={{      background: '#242e3d'}}><SearchOutlined /></Button>} />   
               
             
             
              </div>
              <div>  
                <Tree
                  showIcon
                  defaultExpandAll
                  defaultSelectedKeys={['0-0-0']}
                  switcherIcon={<DownOutlined />}
                  treeData={treeData}
                  onSelect={onTreeSelect}
                />
              </div>
            </Col>
            <Col xl={18} lg={18} md={18} sm={18} xs={18} >
              <Search   className={styles.search} placeholder="项目名称" onSearch={onSearch} style={{ width: '100%' }}
                enterButton={
                  <Button style={{      background: '#242e3d'}}><SearchOutlined /></Button>}
              />
              <Table dataSource={selectData} columns={selectColumns} 
                onRow={record => {return {onClick:handleCancel} }}/>
            </Col>
          </Row>
        </Modal>
  </>
    );
};

export default Report;